<template>
  <div class="detailedNews">
    <globalhead :mes="mes"></globalhead>
    <div class="main">
      <!--第一大框 -->
      <div class="newscontent">
        <div class="contmiddle flclear">
          <div class="contleft">
            <div class="titlebg">
              <img
                src="../../assets/all-news-img/contentTitleBg.png"
                alt="觅食"
              />
              <div class="timer">
                <img src="../../assets/timer.svg" alt="" />
                <span>2019.08.03</span>
              </div>
            </div>
            <div class="contenttext">
              <p>
                值此中国共产党成立 100 周年之际，长春市委网信办推出 "
                我身边的党员故事 "
                短视频征集活动，通过富有感染力及共情力地讲述，立体展现身边党员、党组织的故事，以
                " 小人物 " 的视角展现 " 大情怀
                "，充分反映长春干部群众发扬红色传统、传承红色基因，牢记嘱托、砥砺奋进，不断创造更加幸福美好生活的生动实践，凝聚迈进新征程、奋进新时代的强大力量。
                今天，" 我身边的党员故事 " 短视频征集活动推出第 15 个征集作品。
                从 " 打工者 " 到 " 主人翁 "，从 " 幕后人 " 到 " 排头兵
                "，他是希望高中内高班最早的参与者和见证者之一——艾合买提江 ·
                沙吾提。大家都热情地叫他 " 老艾
              </p>
              <p>
                "，他在柴米油盐中诠释着热忱，在煎炒烹炸里淬炼着初心。那灶台上的一团火，就是他对民族教育事业最炽热的情感！值此中国共产党成立
                100 周年之际，长春市委网信办推出 " 我身边的党员故事 "
                短视频征集活动，通过富有感染力及共情力地讲述，立体展现身边党员、党组织的故事，以
                " 小人物 " 的视角展现 " 大情怀
                "，充分反映长春干部群众发扬红色传统、传承红色基因，牢记嘱托、砥砺奋进，不断创造更加幸福美好生活的生动实践，凝聚迈进新征程、奋进新时代的强大力量。
                今天，" 我身边的党员故事 " 短视频征集活动推出第 15 个征集作品。
                从 " 打工者 " 到 " 主人翁 "，从 " 幕后人 " 到 " 排头兵
                "，他是希望高中内高班最早的参与者和见证者之一——艾合买提江 ·
              </p>
              沙吾提。大家都热情地叫他 " 老艾 "
              <p>
                ，他在柴米油盐中诠释着热忱，在煎炒烹炸里淬炼着初心。那灶台上的一团火，就是他对民族教育事业最炽热的情感！值此中国共产党成立
                100 周年之际，长春市委网信办推出 " 我身边的党员故事 "
                短视频征集活动，通过富有感染力及共情力地讲述，立体展现身边党员、党组织的故事，以
                " 小人物 " 的视角展现 " 大情怀
                "，充分反映长春干部群众发扬红色传统、传承红色基因，牢记嘱托、砥砺奋进，不断创造更加幸福美好生活的生动实践，凝聚迈进新征程、奋进新时代的强大力量。
                今天，" 我身边的党员故事 " 短视频征集活动推出第 15 个征集作品。
                从 " 打工者 " 到 " 主人翁 "，从 " 幕后人 " 到 " 排头兵
                "，他是希望高中内高班最早的参与者和见证者之一——艾合买提江 ·
              </p>
              沙吾提。大家都热情地叫他 " 老艾
              "，他在柴米油盐中诠释着热忱，在煎炒烹炸里淬炼着初心。那灶台上的一团火，就是他对民族教育事业最炽热的情感！
            </div>
            <div></div>
          </div>
          <div class="contright">
            <div class="search">
              <p>
                <input type="text" id="searchnews" placeholder="在新闻中搜索" />
                <i>
                  <img src="../../assets/all-news-img/search.svg" alt="" />
                </i>
              </p>
            </div>
            <div class="newslists">
              <h3>更对新闻内容</h3>
              <div @mouseenter="handleClearInterval" @mouseleave="imgtoShow">
                <div class="item" v-for="item in newslists" :key="item.id">
                  <div>
                    <img :src="item.titImg" alt="" />
                    <div class="cont">
                      <h2>
                        <a href="">{{ item.title }}</a>
                      </h2>
                      <span>{{ item.time }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="alltages">
              <h3>全部标签</h3>
              <div>
                <el-tag>#标签一人阿萨德按时</el-tag>
                <el-tag>#标签一二 按时大师</el-tag>
                <el-tag>#标签一说的</el-tag>
                <el-tag>#标签一</el-tag>
                <el-tag>#标签一阿达</el-tag>
                <el-tag>#标签一按时是按时</el-tag>
                <el-tag>#标签一 </el-tag>
                <el-tag>#标签一阿斯哦 </el-tag>
                <el-tag>#标签一 按时</el-tag>
              </div>
            </div>
          </div>
          <div class="bottags">
            <h3>标签</h3>
            <el-tag :class="'ze'">#标签一</el-tag>
            <el-tag>#标签一</el-tag>
            <el-tag>#标签一</el-tag>
            <el-tag>#标签一</el-tag>
          </div>
        </div>
      </div>
      <div class="morenews">
        <div class="momiddle">
          <h2>更多近期新闻</h2>
          <div class="moitems">
            <div
              class="new-items"
              v-for="items in newsarticle"
              :key="items.key"
            >
              <div class="topexhbg">
                <img :src="items.linkbg" />
              </div>
              <div class="cont">
                <h2>{{ items.title }}</h2>
                <p>
                  {{ items.content }}
                </p>
              </div>
              <div class="newbottom flclear">
                <div class="userleft">
                  <a href="">
                    <img :src="items.user.headportrait" alt="" />
                    <span>{{ items.user.username }}</span>
                  </a>
                </div>
                <div class="shareright">
                  <a href="">
                    <img
                      src="../../assets/global-img/share-weixin.svg"
                      alt="微信"
                    />
                  </a>
                  <a href="">
                    <img
                      src="../../assets/global-img/share-weibo.svg"
                      alt="微博"
                    />
                  </a>
                  <a href="">
                    <img
                      src="../../assets/global-img/share-qq.svg"
                      alt="QQ空间"
                    />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import globalhead from "../../components/global.vue"
export default {
  components: {
    globalhead
  },
  data() {
    return {
      mes: "面对老对手俄罗斯啊啊啊啊",
      timer: [],         //展示timer  
      newslists: [
        {
          id: 0,
          title: "123",
          time: "2020-05-12",
          titImg: require('../../assets/global-img/pexels-fauxels.png')
        },
      ],

      newsarticle: [
        {
          linkbg: require('../../assets/home-img/news/lin-news1.png'),
          title: '面对老对手的俄罗斯女人',
          content: '面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…',
          user: {
            headportrait: require('../../assets/home-img/all-svg/samll-logo.png'),
            username: 'admin',
            sharelink: 'http://www.baidu.com'
          },
          key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
        }, {
          linkbg: require('../../assets/home-img/news/lin-news1.png'),
          title: '面对老对手的俄罗斯女人',
          content: '面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…',
          user: {
            headportrait: require('../../assets/home-img/all-svg/samll-logo.png'),
            username: 'admin',
            sharelink: 'http://www.baidu.com'
          },
          key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
        }, {
          linkbg: require('../../assets/home-img/news/lin-news1.png'),
          title: '面对老对手的俄罗斯女人',
          content: '面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…',
          user: {
            headportrait: require('../../assets/home-img/all-svg/samll-logo.png'),
            username: 'admin',
            sharelink: 'http://www.baidu.com'
          },
          key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
        },
      ]
    }
  },
  methods: {
    heiScroll() {      //右边跟随屏幕高度移动
      let dom = $('.contright');
      let domhei = dom.height(); //元素高度
      let parhei = dom.parent().height();//父级元素的高度
      let domtop = dom.offset().top - 150;
      let minhei = parhei - domhei + domtop;
      let wintop;

      console.log(minhei)
      $(window).scroll(function (e) {
        wintop = $(window).scrollTop();
        if (wintop > minhei) {
          return
        }
        if (wintop > domtop) {
          dom.css({ 'top': wintop - domtop + 'px' })
        } else {
          dom.css({ 'top': 0 })
        }
      })
    },
    imgtoShow() {      //文字图片展示效果
   
      let timer1 = setInterval(() => {
        $('.newslists >div .item').last().hide().prependTo('.newslists >div').slideDown();
      }, 2000);
     this.timer.push(timer1)
    },
    handleClearInterval() {    //清楚定时器，输入移入不再显示
      
      this.timer.forEach((item)=>{
        clearInterval(item);
      });
      this.timer = [];
    }
  },
  mounted() {
    const _this = this;
    this.heiScroll();
    this.imgtoShow()

    //测试部分
    for (let index = 1; index < 10; index++) {
      this.newslists.push({
        id: index,
        title: 155000 + index,
        time: "2020-05-12",
        titImg: require('../../assets/global-img/pexels-fauxels.png')
      });
    }


  }
}
</script>
<style scoped lang="scss">
.detailedNews {
  width: 100%;
  background: #fff;
  .main {
    width: 100%;
    height: auto;
    .newscontent {
      width: 100%;
      .contmiddle {
        width: 1530px;
        height: auto;
        margin: 0 auto;
        margin-top: 40px;
        position: relative;
        padding: 0 0 47px;
        border-bottom: 1px solid #ddd;
        .contleft {
          width: 1050px;
          .titlebg {
            width: 100%;
            height: 600px;
            position: relative;
            box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            border-radius: 15px;
            img {
              width: 100%;
              height: 100%;
            }
            .timer {
              position: absolute;
              width: 170px;
              height: 55px;
              background: #ffffff;
              border-radius: 0px 15px 0px 0px;
              left: 0;
              bottom: 0;
              z-index: 10;
              line-height: 55px;
              text-align: center;
              img {
                width: 22px;
                height: 22px;
                vertical-align: middle;
              }
              span {
                font-size: 16px;
                color: rgba(0, 0, 0, 0.85);
                margin-left: 15px;
              }
            }
          }
          .contenttext {
            margin-top: 53px;
            > p {
              font-size: 18px;
              color: rgba(0, 0, 0, 0.65);
              line-height: 35px;
              text-indent: 2em;
              width: 99%;
              margin: 0 auto;
            }
          }
        }
        .contright {
          width: 416px;
          position: absolute;
          top: 0;
          right: 0;
          .search {
            overflow: hidden;
            border-radius: 15px;
            display: inline-block;
            input {
              width: 350px;
              height: 60px;
              background: #eef3f9;
              border-radius: 5px;
              border: none;
              outline: none;
              padding: 0 24px;
              box-sizing: border-box;
            }
            i {
              display: inline-block;
              width: 60px;
              height: 60px;
              background: #0054f7;
              text-align: center;
              line-height: 60px;
              img {
                width: 20px;
                height: 20px;
                vertical-align: middle;
              }
            }
          }
          .newslists {
            box-sizing: border-box;
            padding: 25px 40px 30px;
            margin-top: 20px;
            border: 1px solid #ddd;
            height: 540px;
            overflow: hidden;
            transition: all 0.5s;
            h3 {
              font-size: 18px;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.75);
              line-height: 35px;
              margin-bottom: 5px;
            }
            > div {
              height: 440px;
              overflow: hidden;
              width: 100%;
              .item {
                // margin-top: 15px;
                // padding-top: 15px;
                // padding-bottom: 15px;
                border-bottom: 1px solid #f1f1f1;
                position: relative;
                height: 110px;
                box-sizing: border-box;
                > div {
                  padding: 15px;
                  width: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;
                  z-index: 10;
                  img {
                    width: 80px;
                    height: 80px;
                    border-radius: 15px;
                    overflow: hidden;
                    float: left;
                    margin-right: 23px;
                  }
                  .cont {
                    overflow: hidden;
                    h2 {
                      font-size: 18px;

                      line-height: 40px;
                      max-width: 100%;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      white-space: nowrap;
                      a {
                        color: rgba(0, 0, 0, 0.85);
                        transition: color 0.5s;
                      }
                    }
                    h2:hover a {
                      color: #378bd2;
                    }
                    span {
                      font-size: 14px;
                      color: rgba(0, 0, 0, 0.5);
                      line-height: 40px;
                      user-select: none;
                    }
                  }
                }
              }
              .item::after {
                content: "";
                display: block;
                clear: both;
              }

              .item::before {
                content: "";
                position: absolute;
                z-index: 0;
                width: 0;
                height: 100%;
                right: 0;
                top: 0;
                background: #f4f4f4;
                transition: all 0.5s;
              }
              .item:hover::before {
                width: 100%;
              }
            }
          }
          .alltages {
            margin-top: 53px;
            h3 {
              font-size: 22px;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.75);
              line-height: 35px;
            }
            > div {
              margin-top: 22px;
              span {
                margin-bottom: 15px;
                margin-right: 15px;
              }
            }
          }
        }
        .bottags {
          margin: 56px 0 0;
          h3 {
            font-size: 22px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.75);
            margin-right: 20px;
            display: inline-block;
          }
          span {
            height: 45px;
            background: #eef3f9;
            border-radius: 8px;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            line-height: 45px;
            margin-right: 16px;
          }
          span.ze {
            background: #0054f7;
            font-size: 16px;
            color: #ffffff;
          }
        }
      }
    }
    .morenews {
      width: 100%;
      .momiddle {
        width: 1530px;
        margin: 0 auto;
        margin-bottom: 90px;
        h2 {
          font-size: 28px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.85);
          line-height: 35px;
          margin: 53px 0 34px;
        }
        .moitems {
          width: 1530px;
          display: flex;
          justify-content: start;
          .new-items {
            width: 430px;
            height: 580px;
            box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.02);
            border-radius: 15px;
            overflow: hidden;
            margin-right: 30px;
            background: #fff;
            .topexhbg {
              width: 100%;
              height: 290px;
              margin: 0;
              padding: 0;
              img {
                width: 100%;
                height: 100%;
              }
            }

            .cont {
              width: 100%;
              height: auto;
              h2 {
                text-align: left;
                width: 198px;
                font-size: 22px;
                font-weight: 500;
                color: #010101;
                line-height: 35px;
                max-width: 360px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                margin: 32px 0 21px;
                margin-left: 32px;
              }
              p {
                max-width: 360px;
                height: 70px;
                font-size: 16px;
                color: #010101;
                line-height: 35px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                margin-left: 32px;
                margin-bottom: 41px;
              }
            }
            .newbottom {
              width: 100%;
              height: auto;
              width: 370px;
              border-top: 1px solid #f1f1f1;
              padding-top: 27px;
              margin: 0 auto;
              .userleft {
                float: left;
                line-height: 35px;
                vertical-align: middle;
                img {
                  width: 35px;
                  height: 35px;
                  vertical-align: middle;
                  margin: 0;
                  font-size: 0;
                }
                span {
                  font-size: 16px;
                  color: #010101;
                  line-height: 35px;
                  margin-left: 10px;
                }
              }
              .shareright {
                float: right;
                margin-top: 7px;
                box-sizing: border-box;
                padding: 0 5px;
                a {
                  display: inline-block;
                  width: 26px;
                  height: 21px;
                  margin-left: 15px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
          .new-items:last-child {
            margin: 0;
          }
        }
      }
    }
  }
}
</style>